import { defineComponent, reactive, watch, nextTick } from "vue";
import _ from "lodash";

export default defineComponent({
  setup(props, { expose }) {
    const handler_default = {
      change: () => { },
      close: () => { },
    }
    const state = reactive({
      isShow: false,
      value: [] as any[],
      options: [] as any[],
      handler: _.cloneDeep(handler_default) as any,
    })
    const open = (value: any[], options: any[], handler: any) => {
      state.value = value || [];
      state.options = options || [];
      state.handler.change = handler.change;
      state.isShow = true;
    }
    const close = () => {
      state.handler?.close?.();
      nextTick(() => {
        state.value = [];
        state.options = [];
        state.handler = _.cloneDeep(handler_default);
      })
    }
    watch(() => state.isShow, (nv) => {
      if (!nv) {
        close();
      }
    })
    expose({
      open,
    })
    return () => (
      <nut-cascader v-model:visible={state.isShow} modelValue={state.value} options={state.options} onChange={state.handler.change}></nut-cascader>
    )
  }
})